<template>
  <div class="c-select">
    <div
      class="zq-drop-list"
      :v-out-click="this.selectList ==false"
    >
      <span @click="onDplOver($event)">选中项的文本<i></i></span>
      <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
      </ul>
    </div>
  </div>
</template>



<script>
/**
 * * select
 */
export default {
  name: "select",
  components: {},
  mixins: [],
  props: ["item"],
  directives: {
    outClick: {
      bind(el, binding, vnode) {
        function documentHandler(e) {
          let _target = e.target;
          // * 点击自身及内部元素不做处理
          if (el.contains(_target)) return false;
          // * 执行指令对应的表达式
          if (binding.expression) binding.value(e);
        }
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener("click", documentHandler);
      },
      unbind(el, binding) {
        document.removeEventListener("click", el.__vueClickOutside__);
        delete el.__vueClickOutside__;
      }
    }
  },
  data() {
    return {
      isShowSize: false,
      i: -1,
      selectList: false
    };
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  mounted() {},
  methods: {
    onDplOver() {
      this.selectList = !this.selectList;
    },
    //实现点击哪个下拉框显示
    clickSize(item, index) {
      this.i = index;
      this.isShowSize = !this.isShowSize;
    },
    //实现选取下拉值
    getSize(item, item1) {
      this.item.name = item1.AttrValueName;
      this.isShowSize = !this.isShowSize;
    }
  }
};
</script>

